<script setup lang="ts">
import {ref, watch} from 'vue'
import {Server} from "../../types/server-type"

// 组件参数
const props = withDefaults(
  defineProps<{
    // 是否为新增模式
    isAdd?: boolean;
  }>(),
  {
    isAdd: false,
  }
)

// 编辑对话框是否显示
const show = defineModel('show', {required: true, default: false})

// 表单数据
const form = ref<Server>({
  name: '',
  host: '',
  port: 22,
  username: '',
  password: '',
})

watch(() => show.value, (newVal) => {
  // 编辑对话框关闭
  if (!newVal) {
    // 清空表单数据
    form.value = {
      name: '',
      host: '',
      port: 22,
      username: '',
      password: '',
    }
    return
  }

})

</script>

<template>
  <div class="server-editor">
    <n-modal
      v-model:show="show"
      preset="dialog"
      :show-icon="false"
      :title="isAdd ? '新增服务器' : '编辑服务器'"
    >
      <n-form
        :model="form"
        label-width="auto"
        label-placement="left"
        label-align="left"
      >
        <n-form-item label="服务器名称" path="name">
          <n-input v-model:value="form.name" placeholder="请输入服务器名称" clearable/>
        </n-form-item>
        <n-form-item label="服务器主机" path="host">
          <n-input v-model:value="form.host" placeholder="请输入服务器主机" clearable/>
        </n-form-item>
        <n-form-item label="服务器端口号" path="port">
          <n-input-number v-model:value="form.port" placeholder="请输入服务器端口号" clearable/>
        </n-form-item>
        <n-form-item label="用户名" path="username">
          <n-input v-model:value="form.username" placeholder="请输入用户名" clearable/>
        </n-form-item>
        <n-form-item label="密码" path="password">
          <n-input
            v-model:value="form.password"
            placeholder="请输入密码"
            type="password"
            clearable
            show-password-toggle
          />
        </n-form-item>
      </n-form>
      <div class="flex-end gap-2">
        <n-button @click="show = false">取消</n-button>
        <n-button type="primary">保存</n-button>
      </div>
    </n-modal>
  </div>
</template>

<style scoped>

</style>
